<template>
  <div class='column'>
    <!-- 管理对象 -->
    <div class='manage panel wrapper'>
      <div class='inner'>
        <div class='title'>
          <span class="icon"></span>
          <h3>应用软件管理汇总</h3>
        </div>
        <div class='chart'>
          <bar-chart
          ref="manageRef"
          :showLegend="showLegend"
          :xData="manage_xData"
          :chartData="manage_chartData"
          :barColor="manage_barColor"
          :otherOptions="manage_option"
          :commonStyle="bar_style"
          @handleClick="handleManageClick"
          />
          <!-- <div id='manageChart' class='chartPart'></div> -->
        </div>
      </div>
    </div>
    <!-- 主机访问-->
    <div class='manage panel wrapper'>
      <div class='inner'>
        <div class='title'>
          <span class="icon"></span>
          <h3>主机状态管理</h3>
        </div>
        <div class='chart'>
          <bar-chart
          :showLegend="showLegend"
          :xData="computer_xData"
          :chartData="computer_chartData"
          :barColor="manage_barColor"
          :otherOptions="computer_option"
          :commonStyle="bar_style"
          @handleClick="handleCptClick"
          />
          <!-- <line-chart
          :showLegend="showLegend"
          :xData="computer_xData"
          :chartData="computer_chartData"
          :lineColor="computer_lineColor"
          :otherOptions="computer_option"
          :commonStyle="line_style"
          /> -->
          <!-- <div id='mainCpt' class='chartPart'></div> -->
        </div>
      </div>
    </div>
    <!-- 网络设备访问状态-->
    <div class='manage panel wrapper'>
      <div class='inner'>
        <div class='title'>
          <span class="icon"></span>
          <h3>网络设备访问状态</h3>
        </div>
        <div class='chart'>
          <bar-chart
          :showLegend="showLegend"
          :xData="web_xDate"
          :chartData="web_chartData"
          :barColor="web_barcolor"
          :otherOptions="web_option"
          :commonStyle="bar_style"
          @handleClick="handleWebClick"
          />
          <!-- <div id='webStateChart' class='chartPart'></div> -->
        </div>
      </div>
    </div>
    <left-menu ref='menus' />
    <!-- 网络设备访问状态 -->
    <app-dialog ref="appManage" />
    <web-dialog ref="webDevice" />
    <host-dialog ref="hostState" />
  </div>
</template>

<script>
import mixins from '../mixins'
import AppDialog from '../dialog/appDialog'
import WebDialog from '../dialog/webDialog'
import HostDialog from '../dialog/hostDialog'
export default {
  props: {
    chartData: {
      type: Object,
      default: () => {}
    }
  },
  mixins: [mixins],
  data () {
    return {
      showLegend: true,
      // 应用软件管理
      manage_barColor: ['#6facef', '#e59562', '#6cad90', '#f7cc77'],
      manage_xData: ['信息中心', '省公司', '综合单位', '灾备中心1', '灾备中心2', '灾备中心3'],
      manage_chartData: [
        {
          name: '数据库',
          value: []
        },
        {
          name: '中间件',
          value: []
        },
        {
          name: '标准应用',
          value: []
        }
      ],
      manage_onlineData: {},
      manage_option: {},
      // 网络设备访问状态参数
      web_barcolor: ['#e59662', '#7ccdee', '#7de0b8', '#bb99e8'],
      web_xDate: [],
      web_onlineData: {},
      web_chartData: [
        {
          name: '离线',
          value: []
        },
        {
          name: '在线',
          value: []
        }
      ],
      web_option: {},
      bar_options: {
        legend: {
          top: 5,
          right: 10,
          itemWidth: 20,
          itemHeight: 10,
          itemGap: 15
        },
        grid: {
          top: '15%'
        },
        xAxis: {
          axisLabel: {
            interval: '0'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#6d7e81'
            }
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: '#6d7e81'
            }
          }
        }
      },
      // 柱状图统一样式
      bar_style: {
        itemStyle: {
          normal: {
            barBorderRadius: [2, 2, 0, 0]
          }
        }
      },
      computer_xData: [],
      computer_chartData: [
        {
          name: '在线',
          value: []
        },
        {
          name: '离线',
          value: []
        }
      ],
      computer_onlineData: {},
      computer_lineColor: ['rgba(69, 145, 221)', 'rgba(96, 210, 160)', 'rgba(165, 114, 232)'],
      computer_option: {
        xAxis: {
          axisTick: {
            show: false
          }
        }
      },
      line_style: {
        smooth: true,
        areaStyle: {
          normal: {
            color: this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0
                },
                {
                  offset: 0.8
                }
              ],
              false
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
          }
        },
        symbol: 'circle',
        symbolSize: 8
      }
    }
  },
  components: {
    LeftMenu: () => import('../menus'),
    'BarChart': () => import('@/components/echarts/bar'),
    'LineChart': () => import('@/components/echarts/line'),
    AppDialog,
    WebDialog,
    HostDialog
  },
  created () {
    // this.initData()
    this.commonOption(1)
    this.commonOption(2)
    this.commonOption(3)
  },
  mounted () {
    // let that = this
    // setTimeout(() => {
    //   that.$refs.manageRef.playItem(2000)
    // }, 2000)
  },
  methods: {
    // 处理真实数据
    initData () {
      if (JSON.stringify(this.chartData) !== '{}') {
        let data = this.chartData && this.chartData.appDatas.list ? this.chartData.appDatas.list : []
        this.manage_onlineData = this.chartData.appDatas.count
        this.manage_xData = []
        // this.manage_chartData = []
        // 应用软件管理
        this.manage_chartData[0].value = []
        this.manage_chartData[1].value = []
        this.manage_chartData[2].value = []
        for (let item of data) {
          this.manage_xData.push(item.area)
          for (let item2 in item) {
            if (item2 === 'dataBaseNum') {
              this.manage_chartData[0].value.push(item[item2])
            } else if (item2 === 'middlewareNum') {
              this.manage_chartData[1].value.push(item[item2])
            } else if (item2 === 'standardAppNum') {
              this.manage_chartData[2].value.push(item[item2])
            }
          }
        }
        // 主机状态
        this.computer_xData = []
        this.computer_onlineData = this.chartData.hostStateData.onlineDisOnline
        this.computer_chartData[0].value = []
        this.computer_chartData[1].value = []
        for (let item of this.chartData.hostStateData.list) {
          this.computer_xData.push(item.area)
          for (let item2 in item) {
            if (item2 === 'onlineNumber') {
              this.computer_chartData[0].value.push(item[item2])
            } else if (item2 === 'disOnlineNumber') {
              this.computer_chartData[1].value.push(item[item2])
            }
            // else if (item2 === 'aixNumber') {
            //   this.computer_chartData[2].value.push(item[item2])
            // }
          }
        }

        // 网路设备访问状态
        this.web_xDate = []
        this.web_onlineData = this.chartData.netDeviceDatas.onlineDisOnline
        this.web_chartData[0].value = []
        this.web_chartData[1].value = []
        // this.web_chartData[2].value = []
        // this.web_chartData[3].value = []
        for (let item of this.chartData.netDeviceDatas.list) {
          this.web_xDate.push(item.area)
          for (let item2 in item) {
            if (item2 === 'offlineNumber') {
              this.web_chartData[0].value.push(item[item2])
            } else if (item2 === 'onlineNumber') {
              this.web_chartData[1].value.push(item[item2])
            }
          }
        }
      }
    },
    openMenu () {
      this.$refs.menus.init()
    },
    // 公共样式
    commonOption (type) {
      let _this = this
      // 应用软件图表
      if (type === 1) {
        this.manage_option = {...this.bar_options}
        this.manage_option.legend = {
          ...this.manage_option.legend,
          formatter: function (name) {
            if (name === '数据库') {
              return name + '(' + _this.manage_onlineData.dataBaseNum + ')'
            } else if (name === '中间件') {
              return name + '(' + _this.manage_onlineData.middlewareNum + ')'
            } else {
              return name + '(' + _this.manage_onlineData.standardAppNum + ')'
            }
          }
        }
      } else if (type === 3) {
        this.computer_option = {...this.bar_options}
        // 处理图例，显示在线离线总数
        this.computer_option.legend = {
          ...this.computer_option.legend,
          formatter: function (name) {
            if (name === '在线') {
              return name + '(' + _this.computer_onlineData.onlineNumber + ')'
            } else {
              return name + '(' + _this.computer_onlineData.disOnlineNumber + ')'
            }
          }
        }
        this.computer_option.xAxis = {
          axisLabel: {
            interval: '0'
          },
          splitLine: {
            show: false
          }
        }
        this.computer_option.yAxis = {
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#607070'
            }
          }
        }
      } else { // 网络设备访问状态图表
        this.web_option = {...this.bar_options}
        this.web_option.legend = {
          ...this.web_option.legend,
          formatter: function (name) {
            if (name === '在线') {
              return name + '(' + _this.web_onlineData.onlineNumber + ')'
            } else {
              return name + '(' + _this.web_onlineData.disOnlineNumber + ')'
            }
          }
        }
        // 重写xAxis和yAxis样式属性
        this.web_option.xAxis = {
          axisLabel: {
            interval: '0'
          },
          splitLine: {
            show: false
          }
        }
        this.web_option.yAxis = {
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#607070'
            }
          }
        }
      }
    },
    handleManageClick (val) {
      this.$refs.appManage.init(val)
    },
    handleCptClick (val) {
      this.$refs.hostState.init(val)
    },
    handleWebClick (val) {
      this.$refs.webDevice.init(val)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
